<template>
    <section :class="bushu == 1 ? 'chongzhis1' : 'chongzhis'">
        <!-- <navbar :title="'充值'" :right_show="true" :type="1" ref="navbar"></navbar> -->
		<topHeader></topHeader>
	   <!-- <section class="top-df">
	   	<div>
	   		{{$t('newList.title2')}}
	   	</div>
	   	<div @click="onClickRight">
	   		<img src="../assets/images/zaixiankefu.png" alt="">
	   		{{$t('h_title.xianshangkefu')}}
	   	</div>
	   </section> -->
		<section id="one" v-if="bushu == 1">
            <article @click="fun_one(1)">
                <img src="~path_img/fps.png" alt="">
                <span>{{$t('newList.title3')}}</span>
            </article>
            <article @click="fun_one(2)">
                <img src="~path_img/bld.png" alt="">
                <span>{{$t('newList.title4')}}</span>
            </article>
            <article @click="fun_one(3)">
                <img src="~path_img/xnb.png" alt="">
                <span>{{$t('newList.title5')}}</span>
            </article>
            <!-- <article @click="fun_one(4)">
                <img src="~path_img/zfb.png" alt="">
                <span>{{$t('newList.title6')}}</span>
            </article>
            <article @click="xiaofeijuan">
                <img src="~path_img/card.png" alt="">
                <span>{{$t('newList.title7')}}</span>
            </article> -->
        </section>
        <section id="two" v-else-if="bushu == 2">
			<div>
				<span>{{$t('newList.title8')}}</span>
			</div>
            <section class="input-list">
                <article>
                    <input type="number" v-model="amount" :placeholder="$t('newList.title9')">
                </article>
            </section>
			<div>
				<span>{{$t('newList.title10')}}</span>
			</div>
			<section class="input-list" v-if="type==1">
			    <article>
			        <input type="text" v-model="account" :placeholder="$t('newList.title11')">
			    </article>
			</section>
			<div>
				<span>{{$t('newList.title12')}}</span>
			</div>
			<div class="radiogroup">
				<div>
					<label>
						<input type="radio" v-model="fanli0" @click="fanlis(0)" /> {{$t('newList.title13')}}
					</label>
				</div>
				<div>
					<label>
						<input type="radio" v-model="fanli1" @click="fanlis(1)" /> {{$t('newList.title14')}}
					</label>
				</div>
				<div v-if="user.is_new">
					<label>
						<input type="radio" v-model="fanli2" @click="fanlis(2)" /> {{$t('newList.title15')}}
					</label>
				</div>
			</div>
			<section class="input-list" v-if="false">
			    <article>
                    <select class="form-custom" v-model="fanli" style="background: none;color: #fff;height: 1rem;border: none;width:70%;text-align:left;">
                        <option value="0">{{$t('newList.title13')}}</option>
                        
                        <option value="1">{{$t('newList.title14')}}</option>
                        <option value="2" v-if="user.is_new">{{$t('newList.title15')}}</option>
                        <!-- <option value="3" v-if="user.is_new2">新開戶儲值100以上送100%,1000封顶（20倍流水）</option> -->
                        
                    </select>
					<img src="../assets/images/xia.png" alt="" style="vertical-align:middle;width:16px;">
			    </article>
			</section>
			<div>
				<span>{{$t('newList.title16')}}</span>
			</div>
            <section class="input-list">
                <article>
                    <p v-if="type == 1"><img src="../assets/images/fps.png" alt=""><span>{{$t('newList.title17')}}</span></p>
                    <p v-if="type == 2"><img src="../assets/images/bld.png" alt=""><span>{{$t('newList.title18')}}</span></p>
                    <p v-if="type == 3"><img src="../assets/images/xnb.png" alt=""><span>{{$t('newList.title19')}}</span></p>
                    <p v-if="type == 4"><img src="../assets/images/zfb.png" alt=""><span>{{$t('newList.title20')}}</span></p>
                </article>
            </section>
			
            <a href="javascript:;" class="btn" @click="click_chongzhi">
                {{$t('newList.title21')}}
            </a>
            <a href="javascript:;" class="btn" @click="click_fanhui1" style="margin-top: 14px; background: #fff !important;color: #222;">
               {{$t('newList.title22')}} 
            </a>
			<div class="cztext1">{{$t('newList.title23')}}</div>
			<!-- <div class="czbox">
				<div class="cztext">{{$t('newList.title24')}}</div>
				<div class="cztext2">{{$t('newList.title25')}}</div>
				<div class="cztext2">{{$t('newList.title26')}}</div>
				<div class="cztext2">{{$t('newList.title27')}}</div>
				<div class="cztext2">{{$t('newList.title28')}}</div>
				<div class="cztext2">{{$t('newList.title29')}}</div>
				<div class="cztext2">{{$t('newList.title30')}}</div>
				<img src="../assets/images/chongzhilogo.png" alt="" />
			</div>
			<div class="czbox1">
				<div>{{$t('newList.title31')}}</div>
				<div>{{$t('newList.title32')}}</div>
			</div> -->
        </section>
        <section id="three" v-else-if=" bushu == 3">
            <h5>{{$t('newList.title8')}}<span>$ {{amount_3}}</span><font v-if="type == 3">&nbsp;&nbsp;&nbsp;USDT <span>${{amount_show}}</span></font></h5>
            <h6>{{$t('newList.title34')}}</h6>

            <article v-if="type == 1">
                <span>{{$t('newList.title35')}}</span>
                <p>{{setting.qq_account}} <i v-clipboard:copy="setting.qq_account"  v-clipboard:success="firstCopySuccess">{{$t('fuzhi')}}</i></p>
            </article>
            <article v-if="type == 1">
                <span>{{$t('newList.title36')}}</span>
                <p>{{setting.qq_nickname}}<i v-clipboard:copy="setting.qq_nickname"  v-clipboard:success="firstCopySuccess">{{$t('fuzhi')}}</i></p>
            </article>
            <article v-if="type == 2">
                <span>{{$t('newList.title37')}}</span>
                <p>
                    <img :src="this.$https.baseUrl + setting.bld_pic" alt="">
                </p>
            </article>
            <article v-if="type == 3">
                <span>{{$t('newList.title38')}}</span>
                <p>{{setting.usdt_trc}} <i v-clipboard:copy="setting.usdt_trc"  v-clipboard:success="firstCopySuccess">{{$t('fuzhi')}}</i></p>
            </article>
            <article v-if="type == 3">
                <span>{{$t('newList.title39')}}</span>
                <p>
                    <img :src="this.$https.baseUrl + setting.usdt_trc_pic" alt="">
                </p>
            </article>
            <article v-if="type == 4">
                <span>{{$t('newList.title39')}}</span>
                <p>
                    <img :src="this.$https.baseUrl + setting.alipay_qrcode" alt="">
                </p>
            </article>
            <section class="btn">
                <span @click="click_fanhui">{{$t('newList.title40')}}</span>
                <span @click="click_submit">{{$t('newList.title41')}}</span>
            </section>
            <section class="content">
               {{$t('newList.title42')}} <br>
               {{$t('newList.title43')}} <br>
                {{$t('newList.title44')}}
            </section>
        </section>
		<kefu :show="kefu_show" :s_show="s_show" @fun_kefu_x="fun_kefu_x"></kefu>
        <bottom></bottom>
    </section>
</template>

<script>
	import kefu from '@/components/kefu';
    import Bottom from "@/components/bottom"
    import navbar from "@/components/navbar"
	import topHeader from "@/components/topHeader"
    import {Form, Field, Dialog} from 'vant'
    export default {
        name: "chongzhi",
        data() {
            return {
                bushu: 1,  //第几步
                type: 0, //点击的哪一个
                amount: '',   ///金额
				kefu_show: false,
				s_show: false,
                bilv_1: 1,  //充值比率
                bilv_2: 1,  //充值比率
                bilv_3: 1,  //充值比率
                bilv_4: 1,  //充值比率
                amount_3: ''  ,///最终价格
				setting: this.$store.state.config,
				red:true,
				red2:false,
				fanli:0,
				fanli0:true,
				fanli1:false,
				fanli2:false,
				account:'',
				user:{
					is_new:0,
					is_new2:0
				}
            }
        },
        components: {
            navbar,
            Bottom,			kefu,
			topHeader,
            [Form.name]:Form,
            [Field.name]: Field,
            [Dialog.name]: Dialog
        },
        created() {
            this.$store.commit('Tabbar_index',4)
        },
        mounted() {
			let _this = this
			this.$https.fetchPost('/m/config',{}).then((res) => {
			    _this.$store.commit('config',res.data)
				_this.setting = res.data
			})
			this.$https.fetchGet('/m/personal', {}).then(res => {
				let data = res.data
				this.$store.commit('user', data.member)
				this.user = data.member
				
			})
        },
        methods: {
			fanlis(e){
				if(e == 0){
					if(this.fanli != e){
						this.fanli = 0
						this.fanli0 = true
						this.fanli1 = false
						this.fanli2 = false
					}
				}
				if(e == 1){
					if(this.fanli != e){
						this.fanli = 1
						this.fanli0 = false
						this.fanli1 = true
						this.fanli2 = false
					}
				}
				if(e == 2){
					if(this.fanli != e){
						this.fanli = 2
						this.fanli0 = false
						this.fanli1 = false
						this.fanli2 = true
					}
				}
				console.log(this.fanli)
			},
			onClickRight() {
				this.s_show = true
				this.kefu_show = true
			},
			fun_kefu_x() {
				this.s_show = false
				this.kefu_show = false
			},
			songfen(val){
				if(val=='red'){
					this.red = true;
					this.red2 = false;
					this.fanli = 1;
				}else{
					this.red = false;
					this.red2 = true;
					this.fanli=0;
				}
			},
            xiaofeijuan() {  //消费卷
                this.$refs.navbar.onClickRight()
            },
            firstCopySuccess() {
                this.$toast(this.$t('newList.title45'));
            },
            fun_one(int) {
                this.type = int
                this.bushu = 2
            },
            click_fanhui1(){  //第二步返回
                this.bushu = 1
            },
            click_chongzhi() {   ////第二步确认
                if(this.amount == '' || this.amount < 0){
                    this.$toast(this.$t('newList.title46'))
                }
				if(!this.account && this.type==1){
					this.$toast(this.$t('newList.title47'));
				}
                else{
					this.xiaoshu = parseInt(Math.random()*40,10);
					this.amount_3 = Number(this.amount) + Number(this.xiaoshu/100);
                    // switch (this.type) {
                    //     case 1:
                    //         this.amount_3 = Number(this.amount) + Number(parseInt(Math.random()*40,10)/100);
                    //     break;
                    //     case 2:
                    //         this.amount_3 = this.amount + randomNum(0,40);
                    //         break;
                    //     case 3:
                    //         this.amount_3 = this.amount + randomNum(0,40);
                    //         break;
                    //     case 4:
                    //         this.amount_3 = this.amount + randomNum(0,40);
                    //         break;
                    //     default:
                    //         this.amount_3 = this.amount + randomNum(0,40);
                    //     break;
                    // }
                    this.bushu = 3;
					this.amount_show = (this.amount_3 / this.setting.usdt_lv).toFixed(2);
                }
            },
            click_fanhui() {  //第三步返回重新输入
                this.bushu = 2
            },
            click_submit(){
                Dialog.confirm({
                    message: this.$t('newList.title48'),
                    confirmButtonText:this.$t('newList.title49')
                }).then(() => {
                    ///处理
					if(this.xiaoshu < 10){
						var xiao = '0'+this.xiaoshu;
					}else{
						var xiao = this.xiaoshu;
					}
					if(this.type == 1){
						//专属快
						var url = '/m/qq_pay';
						
					}else if(this.type == 2){
						//便利店
						var url = '/ajax_pay';
						this.$https.fetchPost(url,{'amount':this.amount , 'xiaoshu': xiao,'fanli':this.fanli}).then(res => {
							this.$router.push('/betrecord')
						}).catch(err => {
						    this.$toast(this.$t('newList.title50'));
						})
						return;
					}else if(this.type == 3){
						var url = '/ajax_pay';
						this.$https.fetchPost(url,{'amount':this.amount , 'xiaoshu': xiao,'paytype':'usdt','fanli':this.fanli,'amount_show':this.amount_show}).then(res => {
							this.$router.push('/betrecord')
						}).catch(err => {
						    this.$toast(this.$t('newList.title50'));
						})
						return;
					}else if(this.type == 4){
						var url = '/m/ali_pay';
					}
					this.$https.fetchPost(url,{'money':this.amount , 'xiaoshu': xiao,'account':this.account,'fanli':this.fanli}).then(res => {
						this.$router.push('/betrecord')
					}).catch(err => {
					    this.$toast(this.$t('newList.title50'));
					})
                })
                .catch(() => {
                    // on cancel
					alert(123)
                });
            }
        }
    }
</script>

<style scoped lang="less">
	.top-df {
		display: flex;
		align-items: center;
		position: relative;
		padding: 20px 0px 20px 0px;
		justify-content: flex-end;
		box-sizing: border-box;
	
		div:nth-child(1) {
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #fff;
			width: 100%;
			justify-content: center;
			padding: 0px 20px 0px 0px;
			box-sizing: border-box;
	
			img {
				width: 40px;
				height: 40px;
				margin-right: 5px;
			}
		}
	
		div:nth-child(2) {
			display: flex;
			align-items: center;
			font-size: 12px;
			width: 75px;
			height: 22px;
			position: absolute;
			top: 20px;
			right: 20px;
			color: #333;
			border-radius: 2px;
			background-image: linear-gradient(#f6ce38, #dda82d);
			justify-content: center;
	
			img {
				width: 20px;
				height: 20px;
			}
		}
	}
	.chongzhis{
		min-height: calc(100vh);
		// background: url("~path_img/chongzhibg.png") center no-repeat;
		// background-size: cover;
		background-color: #333333;
		padding-bottom: 100px;
		box-sizing: border-box;
	}
	.chongzhis1{
		min-height: calc(100vh);
		// background: url("~path_img/chongzhibg1.jpg") center no-repeat;
		// background-size: cover;
		background-color: #333333;
	}
	.red{
		border : 1px solid red;
	}
#one{
    padding: .3rem;
    article{
        background: rgba(255,255,255,.35) url("~path_img/enter.png") 90% center no-repeat;
        background-size: .27rem .46rem;
        padding: .5rem .7rem;
        border-radius: .2rem;
        text-align: left;
        margin-bottom: .3rem;
        display: flex;
        align-items: center;
        img{
            width: 1.1rem;
            height: 1.1rem;
            margin-right: .4rem;
        }
        span{
            color: #fff;
            font-size: .5rem;
        }
    }
}
#two{
    padding: 0 .4rem;
	padding-top: 10px;
	
	& > div{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
		
		& > span{
		    color: #fff;
			font-size: 14px;
		}
	}
    & > section{
        display: flex;
        font-size: .34rem;
		background-color: #fff;
        align-items: center;
		border-radius: .2rem;
		margin: .3rem 0;
		overflow: hidden;
		
        & > article{
            width: 7rem;
            height: 1rem;
            input{
                width: 100%;
                line-height: 1rem;
                background-color: transparent;
                border: none;
                color: #f49623;
				font-size: 15px;
				padding: 0 16px;
				
				&::-webkit-input-placeholder {
				    color: #555;
				}
            }
            p{
                display: flex;
                // border:1px solid red;
                width: 6.3rem;
                justify-content: left;
                padding: .2rem .2rem;
            	float:left;
				height: 1rem;
				align-items: center;
            	
                img{
                    width: .5rem;
                    height: .5rem;
                    margin-right: 5px;
                }
                span{
                    color: #f49623;
                }
            }
        }
    }
	select option{
		background-color: #000;
		color: #fff;
	}
    .btn{
        background: #f49623;
		height: 38px;
        width: 100%;
        margin: 14px auto 0;
        color: #fff;
        line-height: 38px;
        text-align: center;
        font-size: .4rem;
        display: block;
        border-radius: .2rem;
    }
	.radiogroup{
		display: block;
		font-size: 16px;
		color: #fff;
		text-align: left;
		margin-top: 10px;
		
		div{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 10px;
		}
	}
}

#three{
    h5{
        padding-top: .6rem;
        font-weight: normal;
        font-size: .4rem;
        color: #fff;
        margin-bottom: .4rem;
        span{
            font-size: .5rem;
            color: #F9AB10;
        }
    }
    h6{
        font-weight: normal;
        color: #fff;
        font-size: .5rem;
        margin-bottom: .6rem;
    }
    & > article{
        padding:0 .3rem;
        display: flex;
        font-size: .34rem;
        margin-bottom: .6rem;
        span{
            display: flex;
            width: 3.5rem;
            color: #fff;
            text-align: left;
        }
        p{
            color: #f49623;
            position: relative;
            width: 12rem;
            text-align: left;
            i{
                color: #fff;
                border:#fff solid 1px;
                padding: .1rem .15rem;
                display: inline-block;
                position: absolute;
                right: 0;
                font-size: .32rem;
            }
            img{
                width: 100%;
            }
        }
    }
    .btn{
        padding:0 .4rem;
        display: flex;
        justify-content: space-between;
        span{
            width: 48%;
            display: block;
            font-size: .42rem;
            line-height: 1.3rem;
            &:first-child{
                background: #fff !important;
				color: #222;
            }
            &:last-child{
                background-color: #f49623;
                color: #fff;
            }
        }
    }
    .content{
        padding: .5rem;
        font-size: .34rem;
        color: #fff000;
        text-align: left;
        line-height: 3;
    }
}
.cztext1{
	width: 100%;
	text-align: center;
	margin: 15px 0;
	margin-bottom: 20px;
	font-size: 14px;
	color: #fff;
}
.czbox{
	width: 100%;
	position: relative;
	
	.cztext{
		width: fit-content;
		line-height: 18px;
		padding: 0 6px;
		font-size: 14px;
		background: linear-gradient(to bottom,#fff000,#b5a900);
		color: #000;
		border-radius: 4px;
	}
	.cztext2{
		font-size: 14px;
		color: #fff;
		margin-top: 10px;
		text-align: left;
	}
	img{
		width: 170px;
		position: absolute;
		top: 0;
		right: 0;
	}
}
.czbox1{
	width: 100%;
	padding: 10px 12px;
	background: rgba(255, 255, 255, .35);
	font-size: 14px;
	color: #fff;
	border-radius: 5px;
	margin-top: 10px;
	text-align: left;
}
</style>
